<template>
  <a-drawer v-model:visible="mVisible" width="1200px">
    <a-table
      style="margin-top: 10px"
      :dataSource="list"
      :columns="columns"
      :pagination="pagination"
      @change="handleTableChange"
      :loading="loading"
    >
      <template #bodyCell="{ column, record }">
        <template v-if="column.key === 'title'">
          {{ record.title ? record.title : "--" }}
        </template>
        <template v-if="column.key === 'content'">
          <div
            class="text-overflow"
            :title="record.content"
            v-if="record.content"
          >
            {{ record.content }}
          </div>
          <div v-else>--</div>
        </template>
        <template v-if="column.key === 'status'">
          <a-tooltip v-if="record.status == 3">
            <template #title>{{ record.status_msg }}</template>
            <span style="color: red">{{ record.status_txt }}</span>
          </a-tooltip>
          <span v-else style="color: green">{{ record.status_txt }}</span>
        </template>
        <template v-if="column.key === 'action'">
          <a-button
            type="link"
            @click="goToArticle(record)"
            :disabled="record.status == 3 || record.status == 1"
            >去创作</a-button
          >
          <a-button
            type="link"
            @click="preview(record)"
            :disabled="record.status == 3 || record.status == 1"
            >查看</a-button
          >
          <a-button
            type="link"
            danger
            class="mr-10"
            :disabled="record.status == 1"
            @click="onDeleteClick(record.id, record.campaign_task_id)"
          >
            删除
          </a-button>
        </template>
      </template>
    </a-table>
  </a-drawer>
</template>
<script setup>
import { onMounted, ref, watch } from "vue";
import { useTable } from "@/hooks/useTable";
import { useVModel } from "@vueuse/core";
import request from "@/common/utils/request";
import { message, Modal } from "ant-design-vue";
import { PlusOutlined, EyeOutlined } from "@ant-design/icons-vue";
import { useRouter } from "vue-router";
import store from "@/store";

const router = useRouter();
const props = defineProps({
  visible: {
    type: Boolean,
  },
});
const emit = defineEmits(["onPreview", "update:visible"]);
let mVisible = useVModel(props, "visible", emit);
let url = "/user/socialMedia/campaignTaskLog/list";
let { list, pagination, getList, loading, page, pageSize } = useTable(url);
let columns = [
  {
    title: "序号",
    dataIndex: "id",
    key: "id",
    width: 100,
  },
  {
    title: "标题",
    dataIndex: "title",
    key: "title",
    ellipsis: true,
  },
  {
    title: "生成内容",
    dataIndex: "content",
    key: "content",
    ellipsis: true,
  },
  {
    title: "状态",
    dataIndex: "status",
    key: "status",
    width: 100,
  },
  {
    title: "创建时间",
    dataIndex: "created_at",
    key: "created_at",
    width: 200,
  },
  {
    title: "操作",
    dataIndex: "action",
    key: "action",
    width: 240,
    align: "center",
  },
];

const handleTableChange = (pager) => {
  page.value = pager.current;
  pageSize.value = pager.pageSize;
  getList();
};
const onDeleteClick = (id, campaign_task_id) => {
  Modal.confirm({
    title: "确定要删除该篇文章吗?",
    okText: "确定",
    cancelText: "取消",
    onOk() {
      request
        .del("/work_ai", "/user/socialMedia/campaignTaskLog/delete", {
          ids: [id],
          campaign_task_id,
        })
        .then((res) => {
          message.success("删除成功");
          page.value = 1;
          getList();
        });
    },
  });
};
const preview = (record) => {
  emit("onPreview", record);
};
const goToArticle = (record) => {
  store.commit("SET_ARTICLE", record);
  router.push({ name: "ImageText" });
};
watch(
  () => props.visible,
  (val) => {
    if (val) {
      getList();
    } else {
      page.value = 1;
      pageSize.value = 10;
    }
  }
);
</script>
<style lang="less" scoped>
.text-overflow {
  width: 100%;
  // 两行省略
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  text-overflow: ellipsis;
  word-break: break-all;
  white-space: normal;
  max-height: 40px;
}
</style>
